<template>
  <!-- 数据报告 -->
  <div class="total-container">
    <div class="title">全省重点行业市场动态监测分析</div>
    <div class="top-options">
      <el-date-picker v-model="date" type="date" format="yyyy年MM月dd日" value-format="yyyy年MM月dd日" placeholder="选择日期"
        :editable="false" :clearable="false">
      </el-date-picker>
      <div class="top-export">
        <el-button size="normal" type="primary" plain class="btn" @click="downloadFile(1)"
          :loading="isExporting">导出周报</el-button>

      </div>
    </div>
    <div class="top-options">
      <el-date-picker v-model="dateMonth" type="month" format="yyyy年MM月" value-format="yyyy年MM月" placeholder="选择日期"
        :editable="false" :clearable="false">
      </el-date-picker>
      <div class="top-export">

        <el-button size="normal" type="success" plain class="btn" @click="downloadFile(2)"
          :loading="isExporting">导出月报</el-button>

      </div>
    </div>
    <div class="top-options">
      <el-date-picker v-model="dateYear" type="year" format="yyyy年" value-format="yyyy年" placeholder="选择日期"
        :editable="false" :clearable="false">
      </el-date-picker>
      <div class="top-export">
        <el-button size="normal" type="warning" plain class="btn" @click="downloadFile(3)"
          :loading="isExporting">导出年报</el-button>

      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Report-Total",
  data() {
    return {
      date: '',
      dateMonth: '',
      dateYear: '',
      isExporting: false,
    };
  },
  mounted() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1);
    const day = String(now.getDate());
    this.dateYear = `${year}年`;
    this.dateMonth = `${year}年${month}月`;
    this.date = `${year}年${month}月${day}日`;

  },
  methods: {
    // 报告数据
    getMonthData(type) {
      let url = '';
      if (type === 1) {
        url = `${process.env.VUE_APP_BASE_URL}/word/zhoubao`;
      } else if (type === 2) {
        url = `${process.env.VUE_APP_BASE_URL}/word/yuebao`;
      } else {
        url = `${process.env.VUE_APP_BASE_URL}/word/nianbao`;
      }

      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = '月报-全省重点行业市场动态监测分析.docx';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
      this.$modal.closeLoading();
      this.isExporting = false;
    },
    downloadFile(type) {
      this.isExporting = true;
      this.$modal.loading("正在导出报告，请稍候...");
      setTimeout(() => {
        this.getMonthData(type);
      }, 500);

    },

  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.total-container {
  width: 100%;
  height: 100%;
  padding: 20px;

}

.title {
  line-height: 30px;
  text-align: center;
}

.no-data {
  font-size: 16px;
  line-height: 200px;
  text-align: center;
  color: #666;
}

.top-options {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  margin-top: 30px;

  .top-filter {}
}

.top-export {
  margin: 0 0 0 30px;

  .btn {
    margin-right: 30px;
    height: 36px !important;
    // line-height: 36px !important;
  }
}

.total-content {
  margin: 20px auto 30px auto;
  text-align: center;
  width: 860px;
}
</style>
